<!--
 * @Author: your name
 * @Date: 2022-01-20 01:14:09
 * @LastEditTime: 2022-01-20 18:31:05
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \json-serveg:\桌面2\VueStudy\vue-test4\vue-eqidemic\src\components\Travel\Travel.vue
-->
<template>
  <div>
      <div class="title">疫情期间出行防疫政策</div>
      <!-- 出发的城市 -->
        <van-field
        v-model="fieldValue1"
        is-link
        readonly
        label="出发的城市"
        placeholder="请选择所在地区"
        @click="show1 = true"
        />
        <van-popup v-model="show1" round position="bottom">
        <van-cascader
            v-model="cascaderValue1"
            title="请选择出发城市"
            :options="options"
            @close="show1 = false"
            @finish="onFinish1"
        />
        </van-popup>

        <!-- 到达的城市 -->
        <van-field
        v-model="fieldValue2"
        is-link
        readonly
        label="到达的城市"
        placeholder="请选择所在地区"
        @click="show2 = true"
        />
        <van-popup v-model="show2" round position="bottom">
        <van-cascader
            v-model="cascaderValue2"
            title="请选择到达的城市"
            :options="options"
            @close="show2 = false"
            @finish="onFinish2"
        />
        </van-popup>

        <div class="search">
            <van-button type="primary" size="large" @click="search">查询城市疫情</van-button>
        </div>
        
        <!-- 出行结果查询 -->
        <div class="content" v-if="JSON.stringify(from_info) != '{}'">
            <div>
                <h3 class="titleCity">出发的城市</h3>
                <p class="titleIn">进入</p>
                <div>{{from_info.low_in_desc}}</div>
                <p class="titleOut">出去</p>    
                <div>{{from_info.out_desc}}</div>
            </div>    
                   
             <div>
                <h3 class="titleCity">到达的城市</h3>
                <p class="titleIn">进入</p>
                <div>{{to_info.low_in_desc}}</div>
                <p class="titleOut">出去</p>    
                <div>{{to_info.out_desc}}</div>
            </div> 
           
        </div>


  </div>
</template>

<script>
import api from '../../api/index'
export default {
    name:'Travel',
  data() {
    return {
      show1: false,
      show2: false,
      from:'',
      to:'',
      fieldValue1: '',
      fieldValue2: '',
      cascaderValue1: '',
      cascaderValue2: '',
      // 选项列表，children 代表子选项，支持多级嵌套
      options: [],
      from_info:{},
      to_info:{}
      

    };
  },
  methods: {
    // 全部选项选择完毕后，会触发 finish 事件
    onFinish1({  value, selectedOptions, tabIndex}) {
        this.from =value
      this.show1 = false;
      this.fieldValue1 = selectedOptions.map((option) => option.text).join('/');
    },
    onFinish2({  value, selectedOptions, tabIndex }) {
        this.to =value
      this.show2 = false;
      this.fieldValue2 = selectedOptions.map((option) => option.text).join('/');
    },
    search(){
        api.getTravelCity({
            from:this.from,
            to:this.to
        }).then((params) => {
            console.log(params.data);
            this.from_info = params.data.result.from_info
            this.to_info = params.data.result.to_info


        })
    }
  },
  mounted() {
      api.getEpidemicTravel().then((res) => {
        //   console.log(res.data)
        //要处理的数据第一层text:省,value:ID,第二层children.text.children.value
        let optionsData = res.data.result
        let arr = []
        optionsData.forEach(item => {
            let obj ={}
            obj.text = item.province
            obj.value = item.province_id
            obj.children = [] //定义一个二级的空数组
            item.citys.forEach(item1 => {
                let child = {}
                child.text = item1.city
                child.value = item1.city_id
                //追加给obj.children=[]
                obj.children.push(child)
            });
            arr.push(obj)
        });
        console.log('处理好的数据',arr);
        this.options = arr

      })
  },
};
</script>

<style scoped>
.title {
  padding: 0.2rem;
}
.search {
  margin: 0.2rem;
}
.titleCity{
    text-align: center;
    line-height:100%;
    color: blue
}
.titleIn{
    color: red;
    line-height:100%;
}
.titleOut{
    color: green;
    line-height:100%;
}
</style>